<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./output.css">
</head>

<body>
    <h2 class="text-3xl font-bold text-center my-10">overflow-visiable </h2>
    <div class="relative rounded-xl  overflow-auto p-8">
        <div class="overflow-visible relative 
        max-w-sm mx-auto bg-white shadow-lg ring-1 
            ring-black/5 rounded-xl 
            flex items-center gap-6 
            dark:bg-slate-800 dark:highlight-white/5">
            <img class="absolute 
            w-20 h-20 -left-6 
            rounded-full shadow-lg"
                src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
            <div class="flex flex-col py-5 pl-24">
                <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Andrew Alfred</strong>
                <span class="text-slate-500 text-sm font-medium dark:text-slate-400">Technical advisor</span>
            </div>
        </div>
    </div>
    <h2 class="text-3xl font-bold text-center my-10">overflow-hidden </h2>
    <div class="relative rounded-xl  overflow-auto p-8">
        <div class="overflow-hidden relative 
        max-w-sm mx-auto bg-white shadow-lg ring-1 
            ring-black/5 rounded-xl 
            flex items-center gap-6 
            dark:bg-slate-800 dark:highlight-white/5">
            <img class="absolute 
            w-20 h-20 -left-6 
            rounded-full shadow-lg"
                src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
            <div class="flex flex-col py-5 pl-24">
                <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Andrew Alfred</strong>
                <span class="text-slate-500 text-sm font-medium dark:text-slate-400">Technical advisor</span>
            </div>
        </div>
    </div>
    <h2 class="text-3xl font-bold text-center my-10">overflow-auto </h2>
    <div class="relative rounded-xl overflow-auto p-8">
        <div
            class="overflow-auto h-72 relative 
            max-w-sm mx-auto bg-white dark:bg-slate-800 dark:highlight-white/5 shadow-lg ring-1 ring-black/5 rounded-xl flex flex-col divide-y dark:divide-slate-200/5">
            <div class="flex items-center gap-4 p-4">
                <img class="w-12 h-12 rounded-full"
                    src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                <div class="flex flex-col">
                    <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Andrew Alfred</strong>
                    <span class="text-slate-500 text-sm font-medium dark:text-slate-400">Technical advisor</span>
                </div>
            </div>
            <div class="flex items-center gap-4 p-4">
                <img class="w-12 h-12 rounded-full"
                    src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                <div class="flex flex-col">
                    <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Debra Houston</strong>
                    <span class="text-slate-500 text-sm font-medium dark:text-slate-400">Analyst</span>
                </div>
            </div>
            <div class="flex items-center gap-4 p-4">
                <img class="w-12 h-12 rounded-full"
                    src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                <div class="flex flex-col">
                    <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Jane White</strong>
                    <span class="text-slate-500 text-sm font-medium dark:text-slate-400">Director, Marketing</span>
                </div>
            </div>
            <div class="flex items-center gap-4 p-4">
                <img class="w-12 h-12 rounded-full"
                    src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                <div class="flex flex-col">
                    <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Ray Flint</strong>
                    <span class="text-slate-500 text-sm font-medium dark:text-slate-400">Technical Advisor</span>
                </div>
            </div>
        </div>
    </div>

    <h2 class="text-3xl font-bold text-center my-10">overflow-x-auto </h2>
    <div class="relative rounded-xl overflow-auto">
        <div class="max-w-md mx-auto bg-white shadow-xl min-w-0 dark:bg-slate-800 dark:highlight-white/5">
            <div class="overflow-x-auto flex">
                <div class="flex-none py-6 px-3 first:pl-6 last:pr-6">
                    <div class="flex flex-col items-center justify-center gap-3">
                        <img class="w-18 h-18 rounded-full"
                            src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                        <strong class="text-slate-900 text-xs font-medium dark:text-slate-200">Andrew</strong>
                    </div>
                </div>
                <div class="flex-none py-6 px-3 first:pl-6 last:pr-6">
                    <div class="flex flex-col items-center justify-center gap-3">
                        <img class="w-18 h-18 rounded-full"
                            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                        <strong class="text-slate-900 text-xs font-medium dark:text-slate-200">Emily</strong>
                    </div>
                </div>
                <div class="flex-none py-6 px-3 first:pl-6 last:pr-6">
                    <div class="flex flex-col items-center justify-center gap-3">
                        <img class="w-18 h-18 rounded-full"
                            src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                        <strong class="text-slate-900 text-xs font-medium dark:text-slate-200">Whitney</strong>
                    </div>
                </div>
                <div class="flex-none py-6 px-3 first:pl-6 last:pr-6">
                    <div class="flex flex-col items-center justify-center gap-3">
                        <img class="w-18 h-18 rounded-full"
                            src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                        <strong class="text-slate-900 text-xs font-medium dark:text-slate-200">David</strong>
                    </div>
                </div>
                <div class="flex-none py-6 px-3 first:pl-6 last:pr-6">
                    <div class="flex flex-col items-center justify-center gap-3">
                        <img class="w-18 h-18 rounded-full"
                            src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                        <strong class="text-slate-900 text-xs font-medium dark:text-slate-200">Kristin</strong>
                    </div>
                </div>
                <div class="flex-none py-6 px-3 first:pl-6 last:pr-6">
                    <div class="flex flex-col items-center justify-center gap-3">
                        <img class="w-18 h-18 rounded-full"
                            src="https://images.unsplash.com/photo-1605405748313-a416a1b84491?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                        <strong class="text-slate-900 text-xs font-medium dark:text-slate-200">Sarah</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <h2 class="text-3xl font-bold text-center my-10">overflow-y-auto </h2>
    <div class="relative rounded-xl overflow-auto p-8">
        <div
            class="overflow-y-auto h-72 relative 
            max-w-sm mx-auto bg-white dark:bg-slate-800 dark:highlight-white/5 shadow-lg ring-1 ring-black/5 rounded-xl flex flex-col divide-y dark:divide-slate-200/5">
            <div class="flex items-center gap-4 p-4">
                <img class="w-12 h-12 rounded-full"
                    src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                <div class="flex flex-col">
                    <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Andrew Alfred</strong>
                    <span class="text-slate-500 text-sm font-medium dark:text-slate-400">Technical advisor</span>
                </div>
            </div>
            <div class="flex items-center gap-4 p-4">
                <img class="w-12 h-12 rounded-full"
                    src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                <div class="flex flex-col">
                    <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Debra Houston</strong>
                    <span class="text-slate-500 text-sm font-medium dark:text-slate-400">Analyst</span>
                </div>
            </div>
            <div class="flex items-center gap-4 p-4">
                <img class="w-12 h-12 rounded-full"
                    src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                <div class="flex flex-col">
                    <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Jane White</strong>
                    <span class="text-slate-500 text-sm font-medium dark:text-slate-400">Director, Marketing</span>
                </div>
            </div>
            <div class="flex items-center gap-4 p-4">
                <img class="w-12 h-12 rounded-full"
                    src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                <div class="flex flex-col">
                    <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Ray Flint</strong>
                    <span class="text-slate-500 text-sm font-medium dark:text-slate-400">Technical Advisor</span>
                </div>
            </div>
        </div>
    </div>
    <h2 class="text-3xl font-bold text-center my-10">overflow-x-scroll </h2>
    <div class="relative rounded-xl overflow-auto">
        <div class="max-w-md mx-auto bg-white shadow-xl min-w-0 dark:bg-slate-800 dark:highlight-white/5">
            <div class="overflow-x-scroll flex">
                <div class="flex-none py-6 px-3 first:pl-6 last:pr-6">
                    <div class="flex flex-col items-center justify-center gap-3">
                        <img class="w-18 h-18 rounded-full"
                            src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                        <strong class="text-slate-900 text-xs font-medium dark:text-slate-200">Andrew</strong>
                    </div>
                </div>
                <div class="flex-none py-6 px-3 first:pl-6 last:pr-6">
                    <div class="flex flex-col items-center justify-center gap-3">
                        <img class="w-18 h-18 rounded-full"
                            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                        <strong class="text-slate-900 text-xs font-medium dark:text-slate-200">Emily</strong>
                    </div>
                </div>
                <div class="flex-none py-6 px-3 first:pl-6 last:pr-6">
                    <div class="flex flex-col items-center justify-center gap-3">
                        <img class="w-18 h-18 rounded-full"
                            src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                        <strong class="text-slate-900 text-xs font-medium dark:text-slate-200">Whitney</strong>
                    </div>
                </div>
                <div class="flex-none py-6 px-3 first:pl-6 last:pr-6">
                    <div class="flex flex-col items-center justify-center gap-3">
                        <img class="w-18 h-18 rounded-full"
                            src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                        <strong class="text-slate-900 text-xs font-medium dark:text-slate-200">David</strong>
                    </div>
                </div>
                <div class="flex-none py-6 px-3 first:pl-6 last:pr-6">
                    <div class="flex flex-col items-center justify-center gap-3">
                        <img class="w-18 h-18 rounded-full"
                            src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                        <strong class="text-slate-900 text-xs font-medium dark:text-slate-200">Kristin</strong>
                    </div>
                </div>
                <div class="flex-none py-6 px-3 first:pl-6 last:pr-6">
                    <div class="flex flex-col items-center justify-center gap-3">
                        <img class="w-18 h-18 rounded-full"
                            src="https://images.unsplash.com/photo-1605405748313-a416a1b84491?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                        <strong class="text-slate-900 text-xs font-medium dark:text-slate-200">Sarah</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <h2 class="text-3xl font-bold text-center my-10">overflow-y-scroll </h2>
    <div class="relative rounded-xl overflow-auto p-8">
        <div
            class="overflow-y-scroll h-72 relative 
            max-w-sm mx-auto bg-white dark:bg-slate-800 dark:highlight-white/5 shadow-lg ring-1 ring-black/5 rounded-xl flex flex-col divide-y dark:divide-slate-200/5">
            <div class="flex items-center gap-4 p-4">
                <img class="w-12 h-12 rounded-full"
                    src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                <div class="flex flex-col">
                    <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Andrew Alfred</strong>
                    <span class="text-slate-500 text-sm font-medium dark:text-slate-400">Technical advisor</span>
                </div>
            </div>
            <div class="flex items-center gap-4 p-4">
                <img class="w-12 h-12 rounded-full"
                    src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                <div class="flex flex-col">
                    <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Debra Houston</strong>
                    <span class="text-slate-500 text-sm font-medium dark:text-slate-400">Analyst</span>
                </div>
            </div>
            <div class="flex items-center gap-4 p-4">
                <img class="w-12 h-12 rounded-full"
                    src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                <div class="flex flex-col">
                    <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Jane White</strong>
                    <span class="text-slate-500 text-sm font-medium dark:text-slate-400">Director, Marketing</span>
                </div>
            </div>
            <div class="flex items-center gap-4 p-4">
                <img class="w-12 h-12 rounded-full"
                    src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80">
                <div class="flex flex-col">
                    <strong class="text-slate-900 text-sm font-medium dark:text-slate-200">Ray Flint</strong>
                    <span class="text-slate-500 text-sm font-medium dark:text-slate-400">Technical Advisor</span>
                </div>
            </div>
        </div>
    </div>
    <h2 class="text-3xl font-bold text-center my-10">overflow-scroll </h2>
    <div class="relative rounded-xl overflow-auto">
        <div class="mx-4 bg-white dark:bg-slate-800 shadow-xl overflow-hidden">
            <div
                class="overflow-scroll grid grid-cols-[70px,repeat(7,150px)] grid-rows-[auto,repeat(16,50px)] max-h-[350px]">
                <!-- Calendar frame -->
                <div
                    class="row-start-[1] col-start-[1] sticky top-0 z-10 bg-white dark:bg-gradient-to-b dark:from-slate-600 dark:to-slate-700 border-slate-100 dark:border-black/10 bg-clip-padding text-slate-900 dark:text-slate-200 border-b text-sm font-medium py-2">
                </div>
                <div
                    class="row-start-[1] col-start-[2] sticky top-0 z-10 bg-white dark:bg-gradient-to-b dark:from-slate-600 dark:to-slate-700 border-slate-100 dark:border-black/10 bg-clip-padding text-slate-900 dark:text-slate-200 border-b text-sm font-medium py-2 text-center">
                    Sun</div>
                <div
                    class="row-start-[1] col-start-[3] sticky top-0 z-10 bg-white dark:bg-gradient-to-b dark:from-slate-600 dark:to-slate-700 border-slate-100 dark:border-black/10 bg-clip-padding text-slate-900 dark:text-slate-200 border-b text-sm font-medium py-2 text-center">
                    Mon</div>
                <div
                    class="row-start-[1] col-start-[4] sticky top-0 z-10 bg-white dark:bg-gradient-to-b dark:from-slate-600 dark:to-slate-700 border-slate-100 dark:border-black/10 bg-clip-padding text-slate-900 dark:text-slate-200 border-b text-sm font-medium py-2 text-center">
                    Tue</div>
                <div
                    class="row-start-[1] col-start-[5] sticky top-0 z-10 bg-white dark:bg-gradient-to-b dark:from-slate-600 dark:to-slate-700 border-slate-100 dark:border-black/10 bg-clip-padding text-slate-900 dark:text-slate-200 border-b text-sm font-medium py-2 text-center">
                    Wed</div>
                <div
                    class="row-start-[1] col-start-[6] sticky top-0 z-10 bg-white dark:bg-gradient-to-b dark:from-slate-600 dark:to-slate-700 border-slate-100 dark:border-black/10 bg-clip-padding text-slate-900 dark:text-slate-200 border-b text-sm font-medium py-2 text-center">
                    Thu</div>
                <div
                    class="row-start-[1] col-start-[7] sticky top-0 z-10 bg-white dark:bg-gradient-to-b dark:from-slate-600 dark:to-slate-700 border-slate-100 dark:border-black/10 bg-clip-padding text-slate-900 dark:text-slate-200 border-b text-sm font-medium py-2 text-center">
                    Fri</div>
                <div
                    class="row-start-[1] col-start-[8] sticky top-0 z-10 bg-white dark:bg-gradient-to-b dark:from-slate-600 dark:to-slate-700 border-slate-100 dark:border-black/10 bg-clip-padding text-slate-900 dark:text-slate-200 border-b text-sm font-medium py-2 text-center">
                    Sat</div>
                <div
                    class="row-start-[2] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r text-xs p-1.5 text-right text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium">
                    5 AM</div>
                <div class="row-start-[2] col-start-[2] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[2] col-start-[3] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[2] col-start-[4] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[2] col-start-[5] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[2] col-start-[6] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[2] col-start-[7] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[2] col-start-[8] border-slate-100 dark:border-slate-200/5 border-b"></div>
                <div
                    class="row-start-[3] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r text-xs p-1.5 text-right text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium">
                    6 AM</div>
                <div class="row-start-[3] col-start-[2] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[3] col-start-[3] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[3] col-start-[4] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[3] col-start-[5] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[3] col-start-[6] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[3] col-start-[7] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[3] col-start-[8] border-slate-100 dark:border-slate-200/5 border-b"></div>
                <div
                    class="row-start-[4] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r text-xs p-1.5 text-right text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium">
                    7 AM</div>
                <div class="row-start-[4] col-start-[2] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[4] col-start-[3] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[4] col-start-[4] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[4] col-start-[5] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[4] col-start-[6] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[4] col-start-[7] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[4] col-start-[8] border-slate-100 dark:border-slate-200/5 border-b"></div>
                <div
                    class="row-start-[5] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r text-xs p-1.5 text-right text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium">
                    8 AM</div>
                <div class="row-start-[5] col-start-[2] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[5] col-start-[3] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[5] col-start-[4] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[5] col-start-[5] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[5] col-start-[6] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[5] col-start-[7] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[5] col-start-[8] border-slate-100 dark:border-slate-200/5 border-b"></div>
                <div
                    class="row-start-[6] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r text-xs p-1.5 text-right text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium">
                    9 AM</div>
                <div class="row-start-[6] col-start-[2] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[6] col-start-[3] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[6] col-start-[4] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[6] col-start-[5] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[6] col-start-[6] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[6] col-start-[7] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[6] col-start-[8] border-slate-100 dark:border-slate-200/5 border-b"></div>
                <div
                    class="row-start-[7] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r text-xs p-1.5 text-right text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium">
                    10 AM</div>
                <div class="row-start-[7] col-start-[2] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[7] col-start-[3] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[7] col-start-[4] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[7] col-start-[5] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[7] col-start-[6] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[7] col-start-[7] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[7] col-start-[8] border-slate-100 dark:border-slate-200/5 border-b"></div>
                <div
                    class="row-start-[8] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r text-xs p-1.5 text-right text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium">
                    11 AM</div>
                <div class="row-start-[8] col-start-[2] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[8] col-start-[3] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[8] col-start-[4] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[8] col-start-[5] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[8] col-start-[6] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[8] col-start-[7] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[8] col-start-[8] border-slate-100 dark:border-slate-200/5 border-b"></div>
                <div
                    class="row-start-[9] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r text-xs p-1.5 text-right text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium">
                    12 PM</div>
                <div class="row-start-[9] col-start-[2] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[9] col-start-[3] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[9] col-start-[4] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[9] col-start-[5] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[9] col-start-[6] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[9] col-start-[7] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[9] col-start-[8] border-slate-100 dark:border-slate-200/5 border-b"></div>
                <div
                    class="row-start-[10] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r text-xs p-1.5 text-right text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium">
                    1 PM</div>
                <div class="row-start-[10] col-start-[2] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[10] col-start-[3] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[10] col-start-[4] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[10] col-start-[5] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[10] col-start-[6] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[10] col-start-[7] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[10] col-start-[8] border-slate-100 dark:border-slate-200/5 border-b"></div>
                <div
                    class="row-start-[11] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r text-xs p-1.5 text-right text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium">
                    2 PM</div>
                <div class="row-start-[11] col-start-[2] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[11] col-start-[3] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[11] col-start-[4] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[11] col-start-[5] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[11] col-start-[6] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[11] col-start-[7] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[11] col-start-[8] border-slate-100 dark:border-slate-200/5 border-b"></div>
                <div
                    class="row-start-[12] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r text-xs p-1.5 text-right text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium">
                    3 PM</div>
                <div class="row-start-[12] col-start-[2] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[12] col-start-[3] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[12] col-start-[4] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[12] col-start-[5] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[12] col-start-[6] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[12] col-start-[7] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[12] col-start-[8] border-slate-100 dark:border-slate-200/5 border-b"></div>
                <div
                    class="row-start-[13] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r text-xs p-1.5 text-right text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium">
                    4 PM</div>
                <div class="row-start-[13] col-start-[2] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[13] col-start-[3] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[13] col-start-[4] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[13] col-start-[5] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[13] col-start-[6] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[13] col-start-[7] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[13] col-start-[8] border-slate-100 dark:border-slate-200/5 border-b"></div>
                <div
                    class="row-start-[14] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r text-xs p-1.5 text-right text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium">
                    5 PM</div>
                <div class="row-start-[14] col-start-[2] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[14] col-start-[3] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[14] col-start-[4] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[14] col-start-[5] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[14] col-start-[6] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[14] col-start-[7] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[14] col-start-[8] border-slate-100 dark:border-slate-200/5 border-b"></div>
                <div
                    class="row-start-[15] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r text-xs p-1.5 text-right text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium">
                    6 PM</div>
                <div class="row-start-[15] col-start-[2] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[15] col-start-[3] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[15] col-start-[4] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[15] col-start-[5] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[15] col-start-[6] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[15] col-start-[7] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[15] col-start-[8] border-slate-100 dark:border-slate-200/5 border-b"></div>
                <div
                    class="row-start-[16] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r text-xs p-1.5 text-right text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium">
                    7 PM</div>
                <div class="row-start-[16] col-start-[2] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[16] col-start-[3] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[16] col-start-[4] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[16] col-start-[5] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[16] col-start-[6] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[16] col-start-[7] border-slate-100 dark:border-slate-200/5 border-b border-r">
                </div>
                <div class="row-start-[16] col-start-[8] border-slate-100 dark:border-slate-200/5 border-b"></div>
                <div
                    class="row-start-[17] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r text-xs p-1.5 text-right text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium">
                    8 PM</div>
                <div class="row-start-[17] col-start-[2] border-slate-100 dark:border-slate-200/5 border-r"></div>
                <div class="row-start-[17] col-start-[3] border-slate-100 dark:border-slate-200/5 border-r"></div>
                <div class="row-start-[17] col-start-[4] border-slate-100 dark:border-slate-200/5 border-r"></div>
                <div class="row-start-[17] col-start-[5] border-slate-100 dark:border-slate-200/5 border-r"></div>
                <div class="row-start-[17] col-start-[6] border-slate-100 dark:border-slate-200/5 border-r"></div>
                <div class="row-start-[17] col-start-[7] border-slate-100 dark:border-slate-200/5 border-r"></div>
                <div class="row-start-[17] col-start-[8]"></div>
                <!-- Calendar contents -->
                <div
                    class="row-start-[2] col-start-3 row-span-4 bg-blue-400/20 dark:bg-sky-600/50 border border-blue-700/10 dark:border-sky-500 rounded-lg m-1 p-1 flex flex-col">
                    <span class="text-xs text-blue-600 dark:text-sky-100">5 AM</span>
                    <span class="text-xs font-medium text-blue-600 dark:text-sky-100">Flight to Vancouver</span>
                    <span class="text-xs text-blue-600 dark:text-sky-100">Toronto YYZ</span>
                </div>
                <div
                    class="row-start-[3] col-start-[4] row-span-4 bg-purple-400/20 dark:bg-fuchsia-600/50 border border-purple-700/10 dark:border-fuchsia-500 rounded-lg m-1 p-1 flex flex-col">
                    <span class="text-xs text-purple-600 dark:text-fuchsia-100">6 AM</span>
                    <span class="text-xs font-medium text-purple-600 dark:text-fuchsia-100">Breakfast</span>
                    <span class="text-xs text-purple-600 dark:text-fuchsia-100">Mel's Diner</span>
                </div>
                <div
                    class="row-start-[14] col-start-[7] row-span-3 bg-pink-400/20 dark:bg-indigo-600/50 border border-pink-700/10 dark:border-indigo-500 rounded-lg m-1 p-1 flex flex-col">
                    <span class="text-xs text-pink-600 dark:text-indigo-100">5 PM</span>
                    <span class="text-xs font-medium text-pink-600 dark:text-indigo-100">🎉 Party party 🎉</span>
                    <span class="text-xs text-pink-600 dark:text-indigo-100">We like to party!</span>
                </div>
            </div>
        </div>
    </div>


</body>

</html>